<template>
  <div class="container">
    <TopCell text="我的关注" @click="backEdit" />

    <AttentionCell
      v-for="(item, index) in data"
      :key="index"
      :name="item.nickname"
      :follow="follow"
      :userImg="item.head_img"
      @click="unfollow(index, item.id)"
    />
    <div class="noAttention" v-if="data.length == 0">
      <span>还没有任何关注!</span>
    </div>
  </div>
</template>

<script>
import { myAttention, unAttention } from "@/api/myAttention";
import TopCell from "../components/TopCell";
import AttentionCell from "../components/AttentionCell";
export default {
  components: {
    TopCell,
    AttentionCell,
  },
  data() {
    return {
      nickname: "",
      follow: "取消关注",
      data: [],
    };
  },
  created() {
    myAttention().then((res) => {
      console.log(res);
      this.data = res.data.data;
      console.log(this.data);
    });
  },
  methods: {
    unfollow(index, id) {
      unAttention("", id).then((res) => {
        if (res.data.message === "取消关注成功") {
          myAttention().then((res) => {
            this.data = res.data.data;
          });
        }
      });
    },
    backEdit() {
      this.$router.push("/user");
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  background-color: #f2f2f2;
  height: 100vh;
  .noAttention {
    display: flex;
    justify-content: center;
    margin-top: 150 /360 * 100vw;
    font-size: 24 /360 * 100vw;
    color: slategray;
  }
}
</style>